<template>
        <div class="forget">
        <div class="forget_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">忘记密码
        </div>
        <div class="login_form">
            <div class="userName half_border">
                <input type="text" placeholder="请输入手机号" v-model.trim="register.userPhone">
            </div>
            <div class="userName half_border">
                <input class="code" type="text" placeholder="请输入验证码" v-model.trim="register.smsCode">
                <span @click="getCode()"  class="count_down count_down1" v-if="!msgCode">获取验证码</span>
                <span class="count_downs count_down" v-else>{{countDownNum}}s后再次获取</span>
            </div>
            <div class="userName">
                <input type="password" placeholder="请输入新密码" v-model.trim="register.password">
            </div>
            <div class="login_bt" @click="doRestPassword()">确定</div>
        </div>
    </div>
</template>

<style>
    @import url("./login.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                register: {userPhone: "", smsCode: "", password: ""},
                countDown: '',
                msgCode:false,
                countDownNum:60,
            }
        },
        created() {
             window.scrollTo(0,0);
        },
        beforeDestroy(){
              clearInterval(this.countDown);
        },
        mounted() {
        },
        methods: {
            goBack() {
                this.$router.goBack()
                clearInterval(this.countDown);
            },
            doRestPassword(){
                if (!this.register.userPhone) {
                    Layer.showMsg("请输入电话")
                    return
                }
                if (!Validate.phoneRule(this.register.userPhone)) {
                    Layer.showMsg("手机格式不正确")
                    return
                }
                if(!this.register.smsCode){
                    Layer.showMsg("请输入验证码")
                    return
                }
                if(!this.register.password){
                    Layer.showMsg("请输入密码")
                    return
                }
                if(this.register.password.length<6||this.register.password.length>20||(!Validate.passwordRule(this.register.password))){
                  Layer.showMsg("请输入6至20位数字与字母的组合");
                  return
                }
                let url = API.serviceDomain + API.restPassword;
                console.info(this.register)
                this.$http.post(url, this.register).then(
                    (res) => {
                        if(res.body.status == '000000'){
                            Layer.showMsg("修改成功");
                            this.$router.push({path: '/login',query:{"backUrl":"/"}});
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("网络错误: 修改失败，请稍候尝试.")
                        return
                    }
                )
            },
            getCode() {
                if (!this.register.userPhone) {
                    Layer.showMsg("请输入电话")
                    return
                }
                if (!Validate.phoneRule(this.register.userPhone)) {
                    Layer.showMsg("手机格式不正确")
                    return
                }

                 this.msgCode=true;
                let that = this;
                this.countDown = setInterval(function () {
                    that.countDownNum--;
                    if (that.countDownNum <= 0) {
                        that.msgCode=false;
                        that.countDownNum=60;
                        clearInterval(that.countDown);
                    }
                }, 1000);
                let url = API.serviceDomain + API.restSendCode + "?phone=" + this.register.userPhone+"&smsType=2";
                this.$http.get(url, this.register.userName).then(
                    (res) => {
                        if(res.body.status == '000000'){
                            Layer.showMsg("请注意查收短信验证码");
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("网络错误: 短信发送失败，请稍候尝试.")
                        return
                    }
                )

            }
        }
    }
</script>
